<template>
  <div class="x-layout-main">
    <header v-if="isPC && $slots.header" class="header">
      <slot name="header"></slot>
    </header>

    <main class="main" ref="scrollerRef">
      <div ref="g-container" :style="containerStyle" class="g-container">
        <div v-if="!isPC && $slots.header" class="g-content pb-0" style="margin-bottom: 10px">
          <slot name="header"></slot>
        </div>
        <slot></slot>
      </div>
    </main>

    <footer v-if="$slots.footer" class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { isPC } from '@/utils/is'

export default defineComponent({
  name: 'XLayoutMain',
  props: {
    containerStyle: {
      type: [String, Object],
      default: null
    }
  },
  setup($props, { expose }) {
    const $state = reactive({
      ...toRefs($props)
    })
    const scrollerRef = ref(undefined);
    return {
      ...toRefs($state),
      isPC: isPC(),
      scrollerRef
    }
  }
})
</script>

<style scoped lang="scss">
.x-layout-main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  min-width: 960px;
  overflow: hidden;

  .header {
    z-index: 1;
    background: #ffffff;
    padding: 20px 20px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }

  .main {
    flex: 1;
    overflow: auto;
  }

  .footer {
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 -6px 6px rgba(0, 0, 0, 0.05);
    z-index: 1;
    padding: 0 20px;
  }
}
</style>
